/**
 * @ directions
 */

html {

}

body {
    background: #ddd;
    font: 14px "微软雅黑", Arial;
    width: 100%;
    margin: 0;

}

h1 {
    margin: 2em;
}

.detail_container {
    background: #fff;
    box-shadow: 4px 0 10px #ccc, -4px 0 10px #ccc, 0 38px 36px -24px #aaa;

    margin-left: 25%;
    max-width: 50%;
    padding: 0;
    width: 100%;
    height: 100%;
    float: left;

}

.personal {
    max-width: 80%;
    width: 100%;
    height: 20%;
    float: left;
    margin: 4em;
    box-shadow: 4px 0 10px #ccc, -4px 0 10px #ccc, 0 38px 36px -24px #aaa;
}
.portrait_container{
   

}
.portrait {
    max-height: 15em;
    max-width: 15em;
    float: left;
}

.name_container{
    width: 40%;

}
.name {
    font-size: 24px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2em;
    color: #008000;
    float: left;


}

.user_description{
    float: right;
    color: #bbb;
    margin-right: 5px;
    padding: 4px 0;
    font-size: 90%;
}

.sign {
    font-size: 12px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    padding: 2em;
    color: #330066;
    float: left;
    width:80%;

}

.score {
    font-size: 12px;
    font-weight: normal;
    margin: 2em;
    padding: 0;
    color: #0099ff;
    float: left;

}

.money {
    font-size: 12px;
    font-weight: normal;
    margin: 2em;
    padding: 0;
    color: #0099ff;
    float: left;
}

.edit {
    float: right;

}

.user_cancel {
    display: none;

}

.portrait_container {
    width: 50%;
    height: 50%;
    float: left;

}

.portrait_edit_container {
    width: 100%;
    height: 50%;
    float: left;
     border: 2px solid #669900;
    display: none;
}

.portrait_edit_container span {
    float: left;
    margin: 1em;
}


.portrait_edit_container a {
    float: left;
    margin: 1em;
}

.portrait_edit {
    margin: 1em;
    width: 80%;
    height: 2em;
    float: left;

}

.honour {
    width: 100%;
    height: 20%;
    float: left;
    border-bottom: 2px solid #666600;

}

.honour li {
    display: inline;
    margin: 2em;
    padding: 2em;

}

.honour_content {

    width: 100%;
    margin: 1em;
    text-aligh: center;

}

.honour_name {
    font-size: 16px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: green;
    float: left;
    width: 5em;

}

.honour_count {
    font-size: 16px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: red;
    float: left;
    width: 3em;

}

.honour_comment {
    font-size: 16px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #666666;
    float: left;

}

.achievement {
    width: 100%;
    float: left;
    border-bottom: 2px solid #666600;
}

.achievement_complete {
    margin: 2em;
    float: left;
    display: inline;
    box-shadow: 4px 0 8px #ccc, -4px 0 12px #ccc, 0 38px 36px -24px #aaa;

}

.achievement_img {
    width: 7em;
    height: 7em;
    float: left;
}

.achievement_name {
    font-size: 24px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2em;
    color: #008000;
    float: left;
    width: 40%;
}

.achievement_comment {
    font-size: 12px;
    font-weight: normal;
    margin: 1em;
    margin-top: 0px;
    padding: 2em;
    color: #330066;
    float: left;
}

.record {
    float: left;
    border-bottom: 2px solid #666600;
}

.border_show {
    border: 2px solid #666600;
}

.hidden {
    display: none;
}